<template>
<div class="planConfiguration">
  <el-form
    ref="form"
    :model="form"
    label-width="100px"
    label-position="left"
    class="viewForm"
  >
    <div class="content-item">
      <el-form-item label="选择企业：">
      智行
      </el-form-item>
      <el-form-item label="生效企微号：">
        <div class="user-images">
          <span>已选</span>
          <div class="img-li">
            <img src="../../../assets/images/profile.jpg"/>
            <img src="../../../assets/images/profile.jpg"/>
            <img src="../../../assets/images/profile.jpg"/>
            <img src="../../../assets/images/profile.jpg"/>
            <img src="../../../assets/images/profile.jpg"/>
          </div>
          <div><i class="el-icon-more"></i></div>
          <div class="number">等5个</div>
        </div>
      </el-form-item>
      <el-form-item label="选择受众：" >
        <div class="condition-big">
          <div class="condition-item">
            <!--              大循环-->
            <div class="title-big">
              <div class="title">条件组1</div>需要满足下列<span>全部</span>条件
            </div>
            <div class="small-item">
              <div class="select-big">
                <div class="select-left">智能标签</div>
                <div class="select-center">包含</div>
                <div class="label-list">
                  <span>未入常规群</span>
                  <span>已入常规群</span>
                  <span>...</span>
                </div>
                <div class="number">共<span>48</span></div>
              </div>

            </div>

          </div>
        </div>
      </el-form-item>
      <el-form-item  label="推送内容">

      </el-form-item>
    </div>
    <div class="content-item">
      <el-form-item label="计划类型：">
        智行
      </el-form-item>
      <el-form-item label="推送时间：">
        在2024-03-29 09:31:02对受众用户进行触达
      </el-form-item>
    </div>
    <div class="content-item">
      <el-form-item label="推送目标：">
       开启
      </el-form-item>
      <el-form-item label="首要目标">
        在 1 天 后进行检测，完成以下条件组则认为完成目标
        <div class="condition-big">
          <div class="condition-item">
            <!--              大循环-->
            <div class="title-big">
              <div class="title">条件组1</div>需要满足下列<span>全部</span>条件
            </div>
            <div class="small-item">
              <div class="select-big">
                <div class="select-left">智能标签</div>
                <div class="select-center">包含</div>
                 <div class="label-list">
                   <span>未入常规群</span>
                   <span>已入常规群</span>
                   <span>...</span>
                 </div>
                <div class="number">共<span>48</span></div>
              </div>

            </div>

          </div>
        </div>
      </el-form-item>
      <el-form-item label="打企微标签：" prop="userName2">
        核心，一般，重要
      </el-form-item>
      <el-form-item label="打智能标签：" prop="userName2">

        未入常规群，已入常规群，未入VIP群，已入VIP群，11111，22222，新好友1小时未发言，持续3天未发言，持续7天未发言，初步沟通，付款客户，无意向客户，未设置阶段，新增标签，啊啊
      </el-form-item>
    </div>
  </el-form>
</div>
</template>
<script>
export default {
  name: "planConfiguration",
  data(){
    return{
      form:{},
    }
  }
}
</script>


<style scoped lang="scss">
.condition-item {
  margin-top: 12px;
  background: #f0f2f5;
  border-radius: 6px;
  padding: 10px;
  width: 1000px;
.small-item {
  .select-big {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 10px 15px;
  }
  .select-left {
    min-width: 160px;
    padding: 5px 8px;
    color: #3070ff;
    background: #eff2fe;
    border-radius: 4px;
    border: 1px solid #d5ddfb;
    height: 32px;
    display: flex;
    align-items: center;
  }
  .select-center {
    margin: 0px 10px;
  }
  .label-list {
    span {
      padding: 5px 8px;
      background: #f9f9f9;
      border-radius: 2px;
      border: 1px solid #f0f0f0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-right: 10px;
    }
  }
}
}
.user-images {
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  padding: 0px 10px;
  color: #888;
  margin-top: 10px;

  .number {
    margin-left: 10px;
  }

  .img-li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 5px;
    overflow: hidden;
    border-radius: 2px;

    img {
      width: 24px;
      height: 24px;
      object-fit: cover;
      margin: 0px 2px;
    }
  }
}
.title-big {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, .65);
  position: relative;

  .title {
    font-size: 14px;
    padding: 0px 16px;
    background: #fff;
    height: 32px;
    display: flex;
    align-items: center;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    margin-right: 10px;
  }
 span {
   color: red;
 }
  .el-select {
    margin: 0px 10px;
  }
}
.viewForm {
  margin:15px;
  ::v-deep .el-form-item{
    margin-bottom: 0px;
  }
  .content-item {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
  }
}
</style>
